<template>
  <div class="axiom-layout" :style="gridStyle">
    <div v-for="col in columns" :key="col.id" :class="`axiom-layout__col axiom-layout__col--${col.id}`">
      <slot :name="`col-${col.id}`"></slot>
    </div>
  </div>
</template>

<script>
import { computed } from 'vue';

export default {
  name: 'AxiomLayout',
  props: {
    columns: {
      type: Array,
      required: true,
      validator: (cols) => {
        return Array.isArray(cols) && cols.every(col => col.id && col.width);
      },
    },
    gap: {
      type: String,
      default: '0',
    },
  },
  setup(props) {
    const gridStyle = computed(() => ({
      display: 'grid',
      gridTemplateColumns: props.columns.map(c => c.width).join(' '),
      gap: props.gap,
      height: '100%',
    }));

    return {
      gridStyle,
    };
  },
};
</script> 